.attr-wrapper {
  position: fixed;
  top: 0;
  // width: 460px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
  transition: transform 0.3s;
  z-index: 1001;
  overflow: overlay;
  user-select: none;

  &.right {
    right: 0;
  }

  &.right.hide {
    transform: translateX(100%);
    box-shadow: none;
  }

  &.left {
    left: 0;
  }

  &.left.hide {
    transform: translateX(-100%);
    box-shadow: none;
  }


  &::-webkit-scrollbar {
    width: 0px;
    /* 滚动条宽度 */
  }


  .dragline{
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    // background-color: #1890ff;
    cursor: ew-resize;
    z-index: 1002;
    &:hover{
      background-color: #1890ff;
      // transition: background-color 0.5s;
    }
  }
  &.left .dragline{
    right: 0;
  }
  &.right .dragline{
    left: 0;
  }


  // 底部的组件css按钮
  .component-css {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 8px;
  }

  // 编辑器
  .css-edit-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    height: 100%;
    width: 100%;
    z-index: 99;

    .header {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      border-bottom: 1px solid rgba(5, 5, 5, 0.06);
    }

    .css-edit {
      height: calc(100% - 40px);
      width: 100%;
    }
  }

  // json编辑器
  .json-edit {
    // 62 + 40
    height: calc(100vh - 102px);
  }

  .ant-tabs-nav {
    padding-left: 20px;
  }

  .tooltip-icon {
    color: rgba(0, 0, 0, .45);
    margin-left: 6px;
  }

  // 覆盖 input的addonAfter的padding样式，并给icon加，这样子点击事件范围才大
  .ant-input-group .ant-input-group-addon {
    padding: 0;

    .anticon {
      padding: 0 11px;
    }
  }

  // 图表的装饰数量
  .base-num-wrapper {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 56px;

    .label {
      margin-right: 10px;
    }
  }

}

// 剪贴板权限开启提示图片
.clipboard-modal {

  // max-width: 848px;
  .clipboard-img-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 100%;
    }
  }
}

// 属性下拉列表
.style-option-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .code {
    color: rgb(186, 85, 211);
  }
}